<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>SourceMap 查看工具</title>
  <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.js"></script>
  <script src="https://unpkg.com/source-map@0.7.3/dist/source-map.js"></script>
  <script>
    sourceMap.SourceMapConsumer.initialize({
      "lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
    });
  </script>
</head>

<body>
  <a href="https://www.npmjs.com/package/source-map" target="_blank">点击查看npm：source-map文档和使用方法</a>
  <form id="myForm">
    <p>
      <label for="line-column">:line:column </label><input id="line-column" name="line-column">
    </p>
    <p>
      <label for="sourceMapFile">sourceMapFile </label><input id="sourceMapFile" type="file" name="sourceMapFile">
    </p>
    <button type="submit" name="submit">确定</button>
  </form>
  <table id="result" border="1" cellspacing="0" cellpadding="10">
    <tr>
      <th>:line:column</th>
      <th> ==></th>
      <th>source</th>
      <th>line</th>
      <th>column</th>
      <th>name</th>
    </tr>
  </table>
  <script>
    $(function () {
      // console.log(sourceMap)
      const form = $('#myForm');
      console.log("form:",form)
      form.on('submit', function (e) {
        e.preventDefault();

        const dataArray = form.serializeArray();
        const dataObj = dataArray.reduce((obj, item) => {
          obj[item.name] = item.value;
          return obj;
        }, {});

        const positon = dataObj['line-column'].split(':');
        const line = positon[1];
        const column = positon[2];

        // 读取文件
        const file = $('#sourceMapFile').get(0).files[0];
        const fileReader = new FileReader();
        fileReader.onloadend = function () {
          const rawSourceMap = fileReader.result;
          // 查找
          sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
            const result = consumer.originalPositionFor({
              source: "./",
              line: +line,
              column: +column
            });
            $('#result').append($(`
                        <tr>
                            <td>:${line}:${column}</td><td> ==> </td><td>${result.source}</td><td>${result.line}</td><td>${result.column}</td><td>${result.name}</td>
                        </tr>
                    `));
          });
        };
        fileReader.readAsText(file);
        return false;
      });
    });
  </script>
</body>

</html>